<template>
  <div class="fillcontain">
    <el-table
      :data="tableData"
      border
      highlight-current-row
      header-cell-class-name="table-header-class"
      style="width:100%"
      v-loading="loading"
    >
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="albumName" label="专辑名称" align="center">        
        <template scope="scope">
          <div style="color:blue;text-decoration:underline;cursor:pointer;" @click="toAlbumDetail(scope.row.albumId)">{{ scope.row.albumName }}</div>
        </template>
        </el-table-column>
      <el-table-column prop="fileUrl" label="歌曲文件" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.fileUrl" target="_blank" class="buttonText">{{scope.row.filePath}}</a>
      </template>
      </el-table-column>
      <el-table-column prop="timeLengthText" label="歌曲时长" align="center"></el-table-column>
      <el-table-column prop="fileSizeText" label="文件大小" align="center"></el-table-column>
      <el-table-column prop="singerName" label="歌手名称" align="center">        
        <template scope="scope">
          <div style="color:blue;text-decoration:underline;cursor:pointer;" @click="toSingerDetail(scope.row.singerId)">{{ scope.row.singerName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="mini" type="primary" :disabled="scope.$index==0" @click="toMoveUp(scope.$index)">上移</el-button>
            <el-button size="mini" type="success" :disabled="scope.$index>=tableData.length-1"  @click="toMoveDown(scope.$index)">下移</el-button>
            <el-button size="mini" type="warning" @click="toCancel(scope.row.id)">取消</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as recommendApi from "@/api/recommendApi";
import addMusic from "./addMusic";
import editMusic from "./editMusic";
import { request } from "http";
export default {
  data() {
    return {
      loading: false,
      tableData: []
    };
  },
  components: {
    addMusic,
    editMusic
  },
  async mounted() {
    await this.getRecommendList();
  },
  methods: {
    getRecommendList() {
      return new Promise((resolve, reject) => {
        let requestData = Object.assign({});
        this.loading = true;
        recommendApi.getRecommendList(requestData)
          .then(res => {
            if (res.errorCode == 0) {
              this.tableData = res.data;
            }
            resolve();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    toAlbumDetail(id) {
      this.$router.push({ name: "albumMusicDetail", query: { id } });
    },
    toSingerDetail(id) {
      this.$router.push({ name: "singerDetail", query: { id } });
    },
    toMoveUp(index) {
      if (index<=0||this.tableData.length==0){
        return;
      }

      let sourceId = this.tableData[index].id;
      let destId=this.tableData[index-1].id;
      recommendApi.moveRecommend({ sourceId,destId }).then(res => {
            this.getRecommendList();
          });
    },
    toMoveDown(index) {
      if (index<0||this.tableData.length==0||index>=this.tableData.length-1){
        return;
      }

      let sourceId = this.tableData[index].id;
      let destId=this.tableData[index+1].id;
      recommendApi.moveRecommend({ sourceId,destId }).then(res => {
            this.getRecommendList();
          });
    },
    toCancel(id) {
      this.$confirm("是否取消推荐该歌曲?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          recommendApi.cancelRecommend({ id }).then(res => {
            this.$message({
              type: "success",
              message: "取消推荐成功!"
            });
            this.getRecommendList();
          });
        });
    }
  }
};
</script>

<style lang="less" scope>
.fillcontain {
  height: calc(100vh - 180px);
  padding: 30px;
  overflow: auto;
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
